<template>
    <el-dialog title="数据范围" :visible.sync="open" width="500px" append-to-body>
        <div slot="title" class="dialog-title flex align-center" style="height:35px">
            <div><h3 style="font-size:16px">数据范围</h3></div>
            <!-- <div class="margin-left">
                 <el-checkbox v-model="row.operateType" :true-label="1" :false-label="0">仅可操作个人创建的数据</el-checkbox>
            </div> -->
        </div>

        <el-row class="margin-top-sm padding-left padding-right height500">
          <el-col :span="10">
            <div class="border-bottom flex justify-between align-start" style="height:30px">请选择数据范围</div>
            <div class="margin-top padding-left-xs padding-right-xs">
                <el-row>
                     <el-radio-group v-model="row.dataScope" @change="change">
                        <el-col :span="24" v-for="item in list" :key="item.id" class="margin-top" >
                            <el-radio :disabled="choice"  :label="item.id" :key="item.id" :value="item.id">{{item.name}}</el-radio>
                        </el-col>
                     </el-radio-group>
                </el-row>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="border-bottom flex justify-between align-start margin-left" style="height:30px">
              <div>已选组织范围</div>
              <div><el-button v-preventReClick type="text" @click="handleClose">清空</el-button></div>
            </div>

            <div class="border-left height500 margin-left" v-if="currow.length > 0?true:false">
              <el-tag closable @close="handleClose">{{currow[0].name}}</el-tag>
            </div>
          </el-col>
        </el-row>

         <div slot="footer" class="dialog-footer">
          <el-button v-preventReClick type="primary" @click="handlesubmit">确 定</el-button>
          <el-button v-preventReClick @click="open =false">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      open: false,
      queryParams:{},
      radio:true,
      checked:false,
      list:[
        // {id:0,name:'个人数据'},
        {id:1,name:'所在组织'},
        {id:2,name:'所在组织及下级组织'}
      ],
      row:{},
      currow:[],
      choice:false,
    };
  },
  methods: {
    handleAdd(row){
    if(row.choice==false){
      this.choice=true
    }
      this.open = true
      // this.row = JSON.parse(JSON.stringify(row))
      this.row = row
      this.currow = []
      console.log(this.list.filter(res => res.id == row.dataScope),'==-=')
      if(this.row.dataScope != null){
        
        this.currow = this.list.filter(res => res.id == row.dataScope)
      }
    },
    // search
    search(){
      
    },
    handlesubmit(){
      console.log(this.row, '9898');
      if(this.row.dataScope == null){
        this.$message.error('请选择数据范围'); return;
      }
      this.$emit('emitsubmit', this.row);
      this.open = false
    },
    // 选中
    change(val){
      this.currow = this.list.filter(res => res.id == val)
      console.log(this.currow)
    },
    // 移除
    handleClose(){
      this.currow = []
      this.row.dataScope = null
    }
  },
  created() {}
};
</script>
<style scoped lang="scss">
.height500{
  height: 400px;
}
.border{
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #F4F6FA;
}
::v-deep .border-bottom{
    border-bottom: 1px solid #F4F6FA;
    .el-button--small{
      padding: 0px 10px;
    }

}
.border-left{
    border-left: 1px solid #F4F6FA;
}
.border-right{
    border-right: 1px solid #F4F6FA;
}
.add{
  margin: -2px;
  margin-left: 5px;
}
::v-deep .el-button--mini{
  padding: 3px 10px;
  span{
    margin-left: 1px;
  }
}
::v-deep .el-dialog__body{
  padding: 0 0px 20px 0px;
}
</style>